// aftersalesadmin.js

// 按钮交互增强
document.addEventListener('DOMContentLoaded', function() {
    // 按钮点击微交互
    document.querySelectorAll('.action-btn').forEach(btn => {
        btn.addEventListener('mousedown', function() {
            this.style.transform = 'scale(0.95)';
        });

        btn.addEventListener('mouseup', function() {
            this.style.transform = 'scale(1)';
        });
    });

    // 输入框交互
    const idInput = document.getElementById('id');
    if(idInput) {
        idInput.addEventListener('focus', function() {
            this.placeholder = '请输入6位数字订单ID';
            this.style.borderColor = '#3498db';
        });

        idInput.addEventListener('blur', function() {
            this.placeholder = '请输入订单ID';
            this.style.borderColor = '#ccc';
        });
    }

    // AJAX分页加载
    document.querySelectorAll('.page-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.href;

            // 显示加载动画
            showLoader();

            fetch(url)
                .then(response => response.text())
                .then(data => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(data, 'text/html');

                    // 更新表格内容
                    const newTable = doc.querySelector('.table');
                    document.querySelector('.table').outerHTML = newTable.outerHTML;

                    // 更新分页控件
                    const newPagination = doc.querySelector('.pagination');
                    document.querySelector('.pagination').outerHTML = newPagination.outerHTML;

                    // 隐藏加载动画
                    hideLoader();
                })
                .catch(error => {
                    console.error('Error:', error);
                    hideLoader();
                });
        });
    });
});

// 加载动画管理
let loaderCount = 0;
function showLoader() {
    loaderCount++;
    if(loaderCount === 1) {
        const loader = document.createElement('div');
        loader.className = 'loader';
        loader.innerHTML = '<div class="spinner"></div>';
        document.body.appendChild(loader);
    }
}

function hideLoader() {
    loaderCount--;
    if(loaderCount <= 0) {
        const loader = document.querySelector('.loader');
        if(loader) {
            loader.remove();
        }
    }
}

// 创建CSS样式
const style = document.createElement('style');
style.textContent = `
    .action-btn {
        transition: all 0.2s ease;
    }
    
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
`;
document.head.appendChild(style);